<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template v-slot:center>
       <div>购物街</div>
      </template>
    </nav-bar>
    <tab-control :titles="['流行','新款','精选']"
    @tabClick="tabClick"
    ref="tabControl1"
    class="tab-control"
    v-show="isTabFixed">
    </tab-control>

  <scroll class="content"
   ref="scroll"
   :probe-type="3"
   @scroll="contentScroll"
   :pull-up-load="true"
   @pullingUp="loadMore">
    <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
    <recommend-view :recommends="recommends"/>
    <feature-view/>
    <tab-control :titles="['流行','新款','精选']"
    @tabClick="tabClick"
    ref="tabControl2">
    </tab-control>
    <goods-list :goods=" showGoods"/>
  </scroll>

  <back-top @click ="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
// 子组件
import HomeSwiper from './childComps/HomeSwiper';
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView.vue';

// 公共组件
import NavBar from 'components/common/navbar/Navbar';
import TabControl from 'components/content/tabControl/TabControl';
import GoodsList from 'components/content/goods/GoodsList';
import Scroll from 'components/common/scroll/Scroll';




import {getHomeMultidata,getHomeGoods} from 'network/home';     //default导出才不同大括号，此处用function进行导出
import BackTop from '@/components/content/backTop/BackTop.vue';




export default {
  name:"Home",
  components:{ //注册
    HomeSwiper,
    RecommendView,
    FeatureView,

    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,

  },
  data(){
  return{
    banners:[],
    recommends:[],
    goods:{
      'pop':{page: 0,list: []},   //请求三部分数据
      'new':{page: 0,list: []},
      'sell':{page: 0,list: []},
    },
    //当前类型
    currentType:'pop',
    isShowBackTop:false,
    tabOffsetTop:0,
    isTabFixed:false,
    saveY:0

  }
  },
  computed:{
   showGoods(){
     return this.goods[this.currentType].list
   }
  },
  activated(){
   this.$refs.scroll.refresh()
   this.$refs.scroll.scrollTo(0,this.saveY,0)
  },
  deactivated(){
  this.saveY=this.$refs.scroll.getScrolly()
  },

  created(){  //craete只写主要数据
    //1.请求多个数据
    this.getHomeMultidata()

    //2.请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')

  },

  mounted(){
    //1.获取tabControl的offsetTop
    //所有的组件都有一个属性为$el:用于获取组件中的元素
    // console.log(this.$refs.tabControl1.$el.offsetTop);

  },
  methods:{
    // 事件监听相关方法
    tabClick(index){
     switch (index){
       case 0:
         this.currentType='pop'
         break
        case 1:
          this.currentType='new'
          break
        case 2:
          this.currentType="sell"
          break
     }
     //让两个tabControl的currentIndex保持一致
     this.$refs.tabControl1.currentIndex = index;
     this.$refs.tabControl2.currentIndex = index;
    },
    backClick(){
      this.$refs.scroll.scrollTo(0,0)
    },
    contentScroll(position){
      //1.判断BackTop是否显示
      this.isShowBackTop= - (position.y) >1000 //当y轴大于1000时显示图片

      //2.决定tabControl是否吸顶（position:fixed）
      this.isTabFixed = (-position.y) > 545
    },
    loadMore(){
      this.getHomeGoods(this.currentType)

      this.$refs.scroll.scroll.refresh()
    },
    swiperImageLoad(){
      //1.
       this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    },

   // 网络请求相关方法
    getHomeMultidata(){
        getHomeMultidata().then(res =>{
      this.banners =res.data.banner.list;  //保存result中banners数据
      this.recommends =res.data.recommend.list;
    })
    },
    getHomeGoods(type){
      const page=this.goods[type].page +1
       getHomeGoods(type,page).then(res =>{   //res获取的是大data 三点拓展符，进行数组赋值
       this.goods[type].list.push(...res.data.list)
       this.goods[type].page+=1

       this.$refs.scroll.finishPullUp() //回调可继续下载
    })

    },

  }
}
</script>


<style scoped>
/* scoper 作用域 样式只能在当前组件中使用，其它不可以使用 */
#home{
  /* padding-top:44px;
  height: 100%; */
  height: 100vh;
 position: relative;

}

.home-nav{
  background-color: var(--color-tint);
  color: #fff;

/* 在浏览器使用原生滚动时，为了让导航不跟着一起滚动 */
  /* position: fixed;
  left:0;
  right: 0;
  top:0;
  z-index: 9; */
}

.content{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
}
.tab-control{
  position: relative;
  z-index: 9;
}

/* .content{
  height: calc(100% - 93px);
  overflow: hidden;
  margin-top: 44px;
} */
</style>
